<template>
    <div>
        <div align="left">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="输入编号">
            <el-input v-model="formInline.user" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small"  @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item>
            <el-button plain icon="el-icon-search" size="small" >重置</el-button>
        </el-form-item>
        </el-form>
        </div>

        <!-- 对话框 -->
        <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="40%"
        >
        <el-form  label-width="80px" :model="formLabelAlign">
        <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="日期">
            <el-input v-model="formLabelAlign.date"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>

        <br>

        <!-- 按钮 -->
         <div align="left">
            <el-button type="danger" size="small" plain icon="el-icon-delete">批量删除</el-button>
            <el-button type="warning" size="small" plain icon="el-icon-upload2">导入</el-button>
            <el-button type="warning" size="small" plain icon="el-icon-download">导出</el-button>
            <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="addEmployee">新增</el-button>
        </div>

        <br>
        <!-- 表单 -->
        <el-table
        border
        :data="tableData"
        >
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="70">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="88">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            width="100">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="160"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        background
        align="right"
        layout="total, sizes, prev, pager, next, jumper"
        :total= totals>
        </el-pagination>

    </div>
</template>

<script>
    export default {
      data() {
        return {
            // 对话框的数据
            title:"",
            formLabelAlign:{
                name:'',
                address:'',
                date:''
            },

            // 对话框的显示隐藏
            dialogVisible: false,
            formInline: {
                user: '',
            },

            // 分页器的数据
            pageSize:5,
            totals: 0,
            currentPage: 1,
            tableData: []
        }
      },
      
    
      methods: {
        // 发送axios请求，获取模拟数据
        getList(){
            this.$http.post("/dept/list",{"currentPage":this.currentPage,"pageSize":this.pageSize}).then((result)=>{
                this.totals = result.data.totals;
                //成功之后给数组赋值
            	this.tableData = result.data.data;
            }).catch((result)=>{
            })
        },

        // 新增员工
        addEmployee(){
            this.title="新增员工";
            this.formLabelAlign={}
            this.dialogVisible=true;
        },
        onSubmit(){
        },
        handleSizeChange(pageSize){
            this.pageSize=pageSize;
            this.getList();
        },
        handleCurrentChange(currentPage){
            this.currentPage=currentPage;
            this.getList();
        },

        // 编辑员工
        handleEdit(index, row) {
            this.title="编辑员工";
            this.formLabelAlign=JSON.parse(JSON.stringify(row));;
            this.dialogVisible=true;
        },
      handleDelete(index, row) {
        this.$confirm('确认删除？')
       .then(_ => {
          this.tableData.splice(index, 1);
        })
       .catch(_ => {});

      }
      },
      mounted(){//页面被加载后，等到Vue实例挂载完毕之后再去获取实例，这个方法会自动触发
           this.getList();
  		}
    }
  </script>